<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>我的论文统计</span>
        <el-button style="float: right; padding: 3px 0" type="text">STATS</el-button>
      </div>
      <div id="main" class="echarts-box" />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ThesisStats',
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById('main')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        grid: {
          top: '10px',
          left: '10px',
          right: '10px',
          bottom: '10px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['社科类', '科技类']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [5, 15],
            type: 'bar',
            label: {
              show: true
            }
          }
        ],
        tooltip: {
          trigger: 'item'
        }
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
#main{
  width: 410px;
  height: 180px;
}
</style>
